<template>
  <h3>试卷管理</h3>
  <!-- 表单 -->
  <div class="test-form">
    <div class="opt">
      <!-- 下拉菜单 -->
      <span class="label">分类:</span>
      <el-select
        @change="chooseCategoryFn"
        v-model="form.id"
        style="width: 360px"
        placeholder="请输入考试分类"
        size="large"
      >
        <el-option
          v-for="item in categories"
          :label="item.text"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="opt">
      <span class="label">试卷:</span>
      <el-input
        v-model="form.name"
        style="width: 360px"
        placeholder="请输入试卷名称"
        size="large"
      />
    </div>
    <div class="opt">
      <span class="label">总分:</span>
      <el-input
        v-model="form.total"
        style="width: 360px"
        placeholder="总分"
        size="large"
      />
    </div>
    <div class="opt">
      <span class="label">及格:</span>
      <el-input
        v-model="form.passline"
        style="width: 360px"
        placeholder="及格线"
        size="large"
      />
    </div>
    <div class="opt">
      <span class="label">考试时长:</span>
      <el-input
        v-model="form.time"
        style="width: 360px"
        placeholder="考试时长"
        size="large"
      />
    </div>
    <div class="opt">
      <span class="label">题目数量:</span>
      <el-input
        v-model="form.num"
        style="width: 360px"
        placeholder="考试时长"
        size="large"
      />
    </div>

    <div class="opt">
      <span class="label">题目分值:</span>
      <!-- disabled -->
      <el-input
        v-model="form.score"
        style="width: 360px"
        placeholder="考试时长"
        size="large"
      />
    </div>

    <div class="opt">
      <el-button @click="submitTestPaperFn" type="primary" size="large"
        >提交</el-button
      >
      <el-button @click="resetTestPaperFn" type="warning" plain size="large"
        >重置</el-button
      >
    </div>
  </div>
  <!-- 表格 -->
  <div class="category-table">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="index" label="序号" width="50" />
      <el-table-column prop="text" label="分类" width="180" />
      <el-table-column prop="name" label="试卷名称" width="180" />
      <el-table-column prop="total" label="总分" width="80" />
      <el-table-column prop="passline" label="及格线" width="80" />
      <el-table-column prop="time" label="时长(小时)" width="100" />
      <el-table-column prop="num" label="题目数量(个)" width="150" />
      <el-table-column prop="score" label="分值(分)" width="100" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { categoryList, examAdd, examList, examRemove } from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表格数据
const tableData = ref<any>([])

interface RuleForm {
  id: string
  name: string
  text: string
  time: number | string
  total: number | string
  passline: number | string
  eid?: string
  num: number | string
  score: number | string
}
const categories = ref<any>([])

const form = reactive<RuleForm>({
  id: '',
  text: '',
  name: '',
  time: 2,
  total: 100,
  passline: 60,
  num: 0,
  score: 0,
})

// 侦听器
watch(form, (newForm: any) => {
  if (newForm.total && newForm.num) {
    form.score = newForm.total / newForm.num
  }
})

// 点击重置
const resetTestPaperFn = () => {
  form.id = ''
  form.text = ''
  form.name = ''
  form.total = 100
  form.passline = 60
  form.time = 2
  form.num = 0
  form.score = 0
}

// 点击提交
const submitTestPaperFn = async () => {
  // 获取表单信息
  let { id, text, name, total, passline, time, num, score } = form
  // 判断是否有值
  if (id && text && name && total && passline && time) {
    await examAdd({ id, text, name, total, passline, time, num, score }).then(
      content => {
        // console.log(content)
        let { code, msg } = content
        if (code == 200) {
          examListFn()
          // 重置表单信息
          resetTestPaperFn()
          ElMessage.success(msg)
        } else {
          ElMessage.error(msg)
        }
      },
      err => {
        console.log(err)
      },
    )
  } else {
    ElMessage.error('缺少参数，请检查在提交')
  }
}

// 获取试卷列表
const examListFn = async () => {
  await examList().then(content => {
    console.log('111', content)
    let { code, msg, result } = content
    if (code == 200) {
      let arr = result.map((item: any, i: number) => {
        item.index = i + 1
        return item
      })
      tableData.value = arr
    } else {
      ElMessage.error(msg)
    }
  })
}

// 监听下拉菜单
const chooseCategoryFn = () => {
  let arr = categories.value.filter((item: any) => item.id == form.id)
  if (arr.length == 1) {
    form.text = arr[0].text
  }
  console.log(form.id)
  console.log(form.text)
}

// 获取分类列表
const getCategoryListFn = async () => {
  await categoryList().then(content => {
    // console.log(content)
    let { code, result } = content
    if (code == 200) {
      categories.value = result
    }
  })
}

// 点击删除
const handleDelete = (index: number, row: any) => {

  // 获取当前点击的选项
  let { eid, name } = row
  ElMessageBox.confirm(`是否删除这个“${name}”试卷?`, '提示', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(async () => {

      // 删除考试分类
      await examRemove({ eid }).then(content => {
        let { code, msg } = content
        if (code != 200) {
          ElMessage.error(msg)
        }
      })
      tableData.value.splice(index, 1)
    })
    .catch(() => {

    })
}

// 初始化数据
getCategoryListFn()
examListFn()
</script>

<style lang="scss">
.test-form {
  .opt {
    margin-top: 15px;
    .label {
      width: 100px;
      display: inline-block;
      text-align: right;
      padding: 0 10px;
    }
  }
}
.category-table {
  margin-top: 15px;
}
</style>
